<template>
	<view class="box screen-all flex">
		<head-navigation></head-navigation>
		<view class="top-view flex center">
			<text class="top-text">我的余额</text>
			<text class="top-price">{{price}}</text>
			<image class="price-icon" src="../../static/yue-top.png"></image>
		</view>
		
		<view class="content-view flex">
			<view class="con-title-view flex row aCenter">
				<view class="con-title-line"></view>
				<text class="con-title-text">充值金额</text>
			</view>
			<textarea class="textarea-view" v-model="priceText" @input="priceArea" placeholder="请输入金额" type="number"></textarea>
			
			<view v-if="info" class="youhui-view flex center">
				<text class="youhui-text">优惠信息：{{info}}</text>
			</view>
		</view>
		
		<view class="chongzhi-view flex center" @click="congzhi">
			确认充值
		</view>
	</view>
</template>

<script>
	import XUtil from '../../common/xlb-util.js';
	import wx from 'jweixin-module';
	export default {
		data() {
			return {
				priceText: '',
				
				price: 0,
				info: '',
				infoList: [],
				infoSort: [], //从小到大排序好的金钱数据
				
				userAgent: 'wechat', //wechat alipay web
				
				infoMoney: 0,
			}
		},
		onLoad() {
			this.getInfo();
			
			if(XUtil.getUserAgent()){
				//获取当前端口是什么
				this.userAgent = XUtil.getUserAgent();
			}
			
			// let arr = [2,1,3,5,4];
			// arr = arr.sort((n1,n2)=>{
			// 	return n1-n2;
			// });  
			// console.log(arr);
		},
		methods: {
			priceArea (e) {
				console.log(e.target.value);
				let _price = e.target.value ? parseFloat(e.target.value) : 0;
				let _list = this.infoSort;
				let _sNum = 0;
				for(let i = 0;i < _list.length;i++){
					if(_price >= _list[i]){
						//因为列表顺序执行，所以总能取出最大的金额。
						_sNum = _list[i];
					}
				}
				console.log('达到标准', _sNum);
				
				let _infoList = this.infoList;
				let _item = null;
				for(let i = 0;i < _infoList.length;i++){
					if(_sNum == _infoList[i].recharge_money){
						_item = _infoList[i];
					}
				}
				console.log('取出赠送金额', _item);
				
				if(_item){
					this.infoMoney = _item.give_money;
					this.info = '充值满' + _item.recharge_money + '，赠'+ _item.give_money;
				}else{
					this.infoMoney = 0;
					this.info = '';
				}
			},
			getInfo () {
				let params = {
					token: uni.getStorageSync("token"),
				}
				console.log(params);
				this.$request("api/Recharge/recharge_list", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							this.price = data.user;
							this.infoList = data.info;
							
							let _sl = [];
							data.info.map((item, i)=>{
								_sl.push(item.recharge_money);
							});
							//从小到大排序
							_sl = _sl.sort((n1,n2)=>{
								return n1-n2;
							});  
							this.infoSort = _sl;
						}else{
							
						}
					}).catch((e) => {
						console.log(e);
					});
			},
			congzhi () {
				if(!this.priceText){
					uni.showToast({ title: '请输入充值金额',icon: 'none' });
					return ;
				}
				
				let params = {
					token: uni.getStorageSync("token"),
					type: this.userAgent == 'wechat' ? 1 : 2, //1.微信2.支付宝
					money: this.priceText,
					give_money: this.infoMoney,
				}
				console.log(params);
				this.$request("api/recharge/recharge", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							let that = this;
							if(this.userAgent == 'wechat'){
								wx.config({
								    debug: false,  // 调试的bug的
								    appId: data.appId,
								    timestamp: data.timeStamp,
								    nonceStr: data.nonceStr,
								    signature: data.signature,
								    jsApiList: ['chooseWXPay'] // 功能列表，我们要使用JS-SDK的什么功能
								});
								wx.ready(function(){
									wx.chooseWXPay({
										appId: data.appId,
										timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
										nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
										package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
										signType: data.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
										paySign: data.paySign, // 支付签名
										success: function (res) {
											uni.showToast({ title: '支付成功！', icon: 'none' })
											this.priceText = '';
											this.getInfo();
										},
										fail: function (e) {
											uni.showToast({ title: '支付失败！', icon: 'none' })
										},
									});
								});
								wx.error(function(res){
									uni.showToast({ title: '微信支付初始化异常！', icon: 'none' })
								});
							}else if(this.userAgent == 'alipay'){
								ap.tradePay({
									orderStr: data
								}, function(res) {
									if(res.resultCode==9000){
										uni.showToast({ title: '支付成功！', icon: 'none' })
										this.priceText = '';
										this.getInfo();
									}
								});
							}
							
						}else{
							uni.showToast({
								title: msg,
							})
						}
					}).catch((e) => {
						console.log(e);
					});
			},
		}
	}
</script>

<style scoped>
	.box {
		
	}
	.top-view {
		width: 100%;
		height: 260rpx;
		padding: 0 30rpx;
		background-color: #010B24;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		position: relative;
	}
	.top-text {
		font-size: 26rpx;
		color: #FFF;
		margin-top: -100rpx;
	}
	.top-price {
		font-size: 34rpx;
		color: #FFF;
	}
	.price-icon {
		width: 120rpx;
		height: 120rpx;
		position: absolute;
		bottom: 114rpx;
		right: 79rpx;
	}
	.content-view {
		width: 690rpx;
		min-height: 200rpx;
		background-color: #FFF;
		margin-left: 30rpx;
		margin-top: -100rpx;
		z-index: 7;
		border-radius: 12rpx;
		padding: 0 30rpx 30rpx 30rpx;
		box-shadow: 1rpx 3rpx 5rpx 3rpx #EFEFEF;
	}
	.textarea-view {
		width: 630rpx;
		height: 182rpx;
		background-color: #F4F4F4;
		padding: 18rpx 30rpx 18rpx 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
	}
	.con-title-view {
		height: 80rpx;
	}
	.con-title-line {
		width: 5rpx;
		height: 30rpx;
		background-color: #010B24;
		margin-right: 12rpx;
	}
	.con-title-text {
		font-size: 30rpx;
		color: #010B24;
	}
	.youhui-view {
		width: 100%;
		height: 80rpx;
		background-color: #FFF2E4;
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
	}
	.youhui-text {
		font-size: 28rpx;
		color: #F48225;
	}
	.chongzhi-view {
		width: 690rpx;
		height: 114rpx;
		background-color: #010B24;
		border-radius: 57rpx;
		margin-left: 30rpx;
		margin-top: 230rpx;
		font-size: 28rpx;
		color: #FFF;
	}
	.chongzhi-view:active {
		background-color: #010B24EE;
	}
</style>
